
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="div1">
    <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
<!--    <menu-item :parr='parr' @tobig='handle($event)' ></menu-item>-->
    <menu-item :parr='parr' @tobig='handle' ></menu-item>
    <!--$event 是一个特殊的变量，它代表了在触发事件时传递的原生 DOM 事件对象
        在这里不需要$event,tobig 会将参数传递给父组件
    -->


</div>

<script type="text/javascript">
    /*
      子组件向父组件传值
      需求：通过子组件来操作父组件，在子组件中调用handle方法。
    */

    Vue.component('menu-item', {
        props: ['parr'],
        template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
          <button @click='$emit("tobig",5)' >按钮-> 扩大字体</button>
          <button @click='$emit("tobig",20)' >按钮-> 扩大字体</button>
        </div>
      `
    });

    const vm = new Vue({
        el: '#div1',
        data: {
            msg: '父组件中内容',
            parr: ['aa','bb','cc'],
            fontSize: 20
        },
        methods: {
            handle: function(value){   //参数可以随便，不一定是value
                // 修改fontSize的值
                this.fontSize += value;
            }
        }
    });
</script>
</body>
</html>
